<template lang="pug">
.page
  .CustomerBill
    //- .search-form.mb-15.pl-10.pr-10
      //- Row(type="flex" justify="start")
      //-   Col.pr-20.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 12 }" :xxl="{span: 6}")
      //-     span.label-txt.w80 查询单位：
      //-     Input(v-model="formData.customerName" placeholder="请输入" clearable)
      //-   Col.pr-20.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 12 }" :xxl="{span: 6}")
      //-     span.label-txt.w80 合作关系：
      //-     Select(v-model="formData.cooperateStatus" clearable)
      //-       Option(v-for="(c_item, c_index) of arrListDown.status" :key="c_index" :value="c_item.value") {{c_item.label}}
      //-   Col.pr-20.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 12 }" :xxl="{span: 6}")
      //-     span.label-txt.w120 费用是否核对：
      //-     RadioGroup.pt-5(v-model="formData.isVerified")
      //-       Radio.m-b-5(:key="0" label="0") 未核对
      //-       Radio.m-b-5(:key="1" label="1") 已核对

      //-   Col.mb-10(:md="{ span: 24 }" :lg="{ span: 12 }" :xl="{ span: 8 }" :xxl="{span: 4}")
      //-     Button(v-if="hasFind" type="info" @click="searchFn") 查询
    
    .search-form.mb-15.pl-10.pr-10
      Form.ivu-row.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="110")
        FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'select'")
            Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
              Option(
                v-for="(c_item, index) in arrListDown[item.options]"
                :value="c_item.value"
                :key="index"
              ) {{ c_item.label }}
          template(v-if="item.type === 'input'")
            Input(v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
          template(v-if="item.type === 'radio'")
            RadioGroup.beautiful-radio-group(type="button" v-model="formData[item.model]")
              Radio.display-inline-block(v-for="(c_item, index) of item.radioArr" :key="index" :label="c_item.value") {{c_item.label}}
          template(v-if="item.type === 'datePicker'")
            DatePicker.w-100(v-model="formData[item.model]" :placeholder="item.placeholder" type="month" format="yyyy-MM")
          template(v-if="item.type === 'cascader'")
            .areaTree
              Cascader(v-model="formData[item.model]" :data="areaTree" clearable change-on-select)
          template(v-if="item.type === 'radio_2'")
            .white-nowrap
              RadioGroup.beautiful-radio-group(type="button" v-model="formData[item.model]")
                Radio.display-inline-block(v-for="(c_item, index) of item.radioArr" :key="index" :label="c_item.value") {{c_item.label}}
              Button.ml-15(v-if="hasFind" type="info" @click="searchFn") 查询
          template(v-if="item.type === 'button'")
            Button(v-if="hasFind" type="info" @click="searchFn") 查询

    .pl-20.pr-20.bg-white
      Table.beautiful-table(:columns="thead" :data="tableData" :stripe="true")
        .clearfix.font-16(slot="header")
          .table-title-lefttxt.pull-left
            |合计
            span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
            |条
            Divider(type="vertical")
            |已核对
            span.text-info.pl-5.pr-5.font-weight {{tableComone.verifiedCount}}
            |条
            Divider(type="vertical")
            |未核对
            span.text-error.pl-5.pr-5.font-weight {{tableComone.notVerifiedCount}}
            |条
        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :current="tableComone.pageIndex"
            :total="tableComone.totalRows"
            @on-change="onChangePage"
            @on-page-size-change="onpageSizeChange"
            show-sizer
            show-total
            placement="top"
            prev-text="上一页"
            next-text="下一页"
            :page-size-opts="[10, 20, 30, 50, 100]"
          )
        //- template(slot-scope="{ row, index }" slot="isNoBill")
        //-   span {{row.isBill ? '否' : '是'}}
        template(slot-scope="{ row, index }" slot="action")
          Button(v-if="hasDetails" type="text" size="small" @click="goCustomerBillDetail(row.id, row.name, row.Year, row.Month)") 详情
</template>

<script>
import { BillApi } from '@/api/Bill.api.js'
import { billThead } from './CBtableHead.js'
import { Common } from '@/utils/common.js'
import _cloneDeep from 'clone-deep'
import { AreaTree } from '@/utils/publicJson.js'
export default {
  name: 'CustomerBill',

  data () {
    return {
      thead: _cloneDeep(billThead),
      tableData: [],
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10, // 当前页面展示条数
        verifiedCount: 0, // 已核对
        notVerifiedCount: 0 // 未核对
      },
      formData: {
        customerName: '',
        cooperateStatus: '1', // 1-正常合作，2-终止合作
        cooperateType: '',
        month: new Date(),
        serverId: null,
        isVerified: '-1',
        isNoBill: '1',
        cityId: []
      },
      formItem: [
        { type: 'input', label: '公司名称：', placeholder: '请输入公司名称', prop: 'customerName', model: 'customerName', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-6' },
        // { type: 'select', label: '合作类型：', placeholder: '请选择合作类型', prop: 'cooperateType', model: 'cooperateType', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-6', options: 'type' },
        // { type: 'select', label: '合作关系：', placeholder: '请选择合作关系', prop: 'cooperateStatus', model: 'cooperateStatus', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-6', options: 'status' },
        // { type: 'select', label: '所属客服：', placeholder: '请选择所属客服', prop: 'serverId', model: 'serverId', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-6', options: 'server' },
        // { type: 'radio', label: '费用是否核对：', placeholder: '费用是否核对', prop: 'isVerified', model: 'isVerified', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-6', radioArr: [{ value: '-1', label: '全部' }, { value: '0', label: '未核对' }, { value: '1', label: '已核对' }] },
        // { type: 'datePicker', label: '费用月份：', placeholder: '请选择费用月份', prop: 'month', model: 'month', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-6' },
        // { type: 'cascader', label: '参保地区：', placeholder: '请选择参保地区', prop: 'cityId', model: 'cityId', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-6' },
        // { type: 'radio_2', label: '空账单：', placeholder: '', prop: 'isNoBill', model: 'isNoBill', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-6', radioArr: [{ value: '-1', label: '全部' }, { value: '0', label: '是' }, { value: '1', label: '否' }] },
        { type: 'button', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-8 ivu-col-span-xxl-4' }
      ],
      rules: {},
      arrListDown: {
        status: [],
        type: [],
        server: []
      },
      areaTree: [] // 中国所有城市树
    }
  },

  watch: {
    $route (to, from) {
      if (from.name === 'home') {
        this.initPage()
      }
    }
  },

  created () {
  },

  mounted () {
    console.log(this.$route.params, '##########################')
    this.getEnum()
    this.servers()
    this.initPage()
    this.getJson()
  },
  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },
    // 详情
    hasDetails () {
      return this.actionArr.indexOf('Details') > -1
    }
  },

  methods: {
    // 初始化
    initPage () {
      if (this.$route.params.IsVerified)
      this.formData.isVerified = this.$route.params.IsVerified
      this.query()
    },
    // 数据字典
    getEnum () {
      let groupName = 'customer.status,customer.type'
      Common.getEnum(groupName, this.arrListDown)
      // console.log('数据字典：', this.arrListDown.status)
    },

    // 获取客服
    async servers () {
      var params = {
        PageIndex: 1,
        PageSize: 100,
        Args: ''
      }
      Common.servers(params, this.arrListDown, 'server')
      console.log('数据字典：', this.arrListDown)
    },

    async getJson () {
      console.log('🍌')
      // this.arrListDown.cityId = ProvinceList // 全国省份列表
      this.areaTree = AreaTree // 获取中国所有城市树
      console.log('🌰')
      console.log('this.formData 🌰', this.formData)
    },

    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        // Year: (this.formData.month).getFullYear(),
        // Month: (this.formData.month).getMonth() + 1,
        CustomerName: this.formData.customerName,
        CooperateStatus: this.formData.cooperateStatus,
        CooperateType: this.formData.cooperateType,
        CityId: this.formData.cityId[this.formData.cityId.length - 1],
        IsVerified: this.formData.isVerified,
        IsNoBill: this.formData.isNoBill,
        Year: this.$moment(this.formData.month).format('YYYY'),
        Month: this.$moment(this.formData.month).format('MM'),
        ServerId: this.formData.serverId,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      console.log('🧞‍ this.formData: ', this.formData)
      let res = await BillApi.customerBillList(params)
      console.log('客户账单res: ', res)
      if (res.status === 200 && res.data.success && res.data.data) {
        this.tableData = res.data.data
      } else {
        this.tableData = []
      }
      this.tableComone.totalRows = res.data.totalRows
      this.tableComone.verifiedCount = res.data.verifiedCount
      this.tableComone.notVerifiedCount = res.data.notVerifiedCount
      this.loading = false

      if (this.tableData.length == 1) {
        console.log('🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰🌰自动跳转到详情')
        let row = this.tableData[0]
        this.goCustomerBillDetail(row.id, row.name, row.Year, row.Month)
      }
    },

    goCustomerBillDetail (id, name, year, month) {
      this.$router.push({
        path: '/CustomerBillDetail',
        name: 'CustomerBillDetail',
        query: {
          companyId: id,
          companyName: name
        }
      })
    }
  }
}
</script>

<style lang="less" scope>
</style>
